body {
  background-color: #f8f8f8;
}

.content {
  padding-top: rem(15px);
}

.red {
  color: #ff4f4f;
}

.navigator {
  position: relative;
  height: rem(88px);
  text-align: center;
  line-height: rem(88px);
  &:after {
    position: absolute;
    display: block;
    content: '';
    border-bottom: 1px solid #e8e8e8;
    // transform: scaleY(.5);
    bottom: 0;
    left: 0;
    right: 0;
  }
  .back {
    position: absolute;
    left: 0; top: 0;
    width: rem(43px);
    height: rem(88px);
    margin-left: rem(27px);
    background-image: url(../images/btn-back.png);
    background-repeat: no-repeat;
    background-size: rem(43px) rem(36px);
    background-position: center;
  }
  .title {
    font-size: rem(32px);
    text-align: center;
    font-weight: 700;
  }
}

.list {
  position: relative;
  background-color: #FFF;
  // margin-top: rem(20px);
  &:before, &:after {
    position: absolute;
    display: block;
    content: "";
    border-top: 1px solid #e8e8e8;
    transform: scaleY(.5);
    left: 0; right: 0;
  }
  &:before {
    top: 0;
  }
  &:after {
    bottom: 0;
  }
  .list-item {
    position: relative;
    height: rem(120px);
    padding-left: rem(23px);
    padding-top: rem(48px);

    &:active {
      background-color: #d9d9d9;
    }

    &.forward:after {
      display: block;
      content: "";
      position: absolute;
      right: rem(25px);
      top: rem(50px);
      background-image: url(../images/list-arrow.png);
      background-repeat: no-repeat;
      background-size: contain;
      width: rem(13px);
      height: rem(22px);
    }

    &:first-child {
      &:before {
        display: none;
      }
    }

    &:before {
      position: absolute;
      display: block;
      content: "";
      border-top: 1px solid #e8e8e8;
      transform: scaleY(.5);
      left: rem(23px); right: 0; top: 0
    }

    .title {
      font-size: rem(28px);
      line-height: rem(28px);
      color: #333;
    }

    .desc {
      margin-left: rem(20px);
      font-size: rem(24px);
    }

    .thumbnail {
      position: absolute;
      right: 0;
      top: 0;
      margin-right: rem(24px);
      margin-top: rem(10px);
      width: rem(100px);
      height: rem(100px);
      border-radius: rem(100px);
      background-repeat: no-repeat;
      background-image: url(http://ued.yypm.com/100x100);
      background-color: #FFF;
      background-size: contain;
    }

  }
}

.info {
  padding: rem(24px);
  li {
    font-size: rem(24px);
    color: #666;
    line-height: rem(30px);
    margin-top: rem(15px);
  }
}

.hint {
  font-size: rem(26px);
  margin: rem(20px) rem(27px) rem(15px);
}

.input-wrapper {
  position: relative;
  overflow: hidden;
  &:before, &:after {
    position: absolute;
    display: block;
    content: "";
    border-top: 1px solid #e8e8e8;
    transform: scaleY(.5);
    left: 0; right: 0;
  }
  &:before {
    top: 0;
  }
  &:after {
    bottom: 0;
  }
  input {
    border: 0;
    outline: 0;
    padding-left: rem(20px);
    width: 100%;
    height: rem(88px);
    line-height: rem(88px);
    font-size: rem(30px);
    &::-webkit-input-placeholder {
      color: #999;
    }
  }
}

.btn {
  height: rem(88px);
  color: #333;
  font-size: rem(34px);
  text-align: center;
  padding-top: rem(30px);
  background-color: #ffdd00;
  margin: rem(120px) rem(25px) 0;
  border-radius: 3px;
  &:active {
    background-color: #ffc600;
  }
}

.btn-disable {
  background-color: #e8e8e8;
  color: #bbb;
  &:active {
    background-color: #e8e8e8;
  }
}
